<template>
	<view>
		<!-- tab -->
		<u-sticky>
		<view class="tab-box">
			<u-tabs bg-color="#ffffff" :is-scroll="false" inactive-color="#999" name="name" :list="tabs" active-color="#616161" c :current="current" @change="tabChange"></u-tabs>
		</view>
		</u-sticky>
		<view class='p-20'>
			<!-- 相册 -->
			<view>
				<post-list :isShowUser="true" :handle="false" :type='type' :list="postList" :loadStatus="loadStatus"></post-list>
			</view>
		</view>
		<!-- <post-list :list="postList" :loadStatus="loadStatus"></post-list> -->
	</view>
</template>

<script>
	import postList from '../../components/post-list/post-list.vue';
	export default {
		components: {
			postList
		},
		data() {
			return {
				tabs: [{name: '约拍',value:1,type:'shoot'},{name: '作品',value:2,type:'album'},{name: '场地',value:3,type:'space'}],
				current:0,
				postList: [],
				loadStatus: "loading",
				page: 1,
				type:'shoot'
			};
		},
		onLoad() {
			this.getPostList();
		},
		onReachBottom() {
			if(this.loadStatus!='nomore') {
				this.page++;
				this.getPostList();
			}
		},
		methods: {
			tabChange(index) {
				if(this.current===index) return;
				this.type = this.tabs[index].type;
				this.current = index;
				this.page = 1;
				this.loadStatus = 'loading';
				this.postList = [];
				this.getPostList();
			},
			async getPostList() {
				this.loadStatus = "loading";
				let res = await this.$api('thumbs')
				this.postList = this.postList.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = "nomore";
				} else {
					this.loadStatus = "loadmore"
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
</style>
